"use strict";
import * as React from 'react';
import { commonProps, commonStyles } from "../../assets/styles/common";
import MyText from "../../component/MyText";
import { activeStyles } from "../../assets/styles/community";
import MyIcon from "../../component/icon";
const NavigationBar = require('react-native-navbar').default;
const { Actions } = require("react-native-router-flux");
import { activeList } from "../../assets/data";
import Line from "../../component/Line";
import Avatar from "../../component/Avatar";
import { groupStyles } from "../../assets/styles/groups";
import NavBackButton from "../../component/BackButton";
const { View, TouchableOpacity, FlatList } = require('react-native');
const { connect } = require('react-redux');
const { List } = require('antd-mobile');
const moment = require("moment");
const avatarProps = {
    borderWidth: 1,
    borderColor: '#fff',
    size: 35,
};
class MyActivesPage extends React.Component {
    constructor(props, context) {
        super(props, context);
        this.joinOrLeaveActive = (active) => {
            this.props.dispatch({
                type: 'active/joinOrLeaveActive',
                payload: { active, from: 'myActives' }
            });
        };
        this.renderMembers = (members) => {
            return members.map((item, index) => {
                return <Avatar key={index} {...avatarProps} style={[groupStyles.member, { zIndex: 8 - (index * 2), backgroundColor: '#DC6451' }]} source={item}/>;
            });
        };
        this.renderItem = (i) => {
            const item = i.item;
            return (<TouchableOpacity onPress={Actions.activeDetail.bind(null, { item })}>
                
                <View style={[activeStyles.listItem, activeStyles.header]}>
                    <MyText color={'#333'} fontSize={15}>{moment(item.created).format('MM月DD日')}</MyText>
                </View>
                
                <View style={[activeStyles.listItem, activeStyles.item, activeStyles.content]}>
                    <View style={[commonStyles.flex1, commonStyles.flexColumn, { justifyContent: 'space-around' }]}>
                        <MyText color={'#333'} fontSize={20} fontWeight={'500'} numberOfLines={1}>{item.title}</MyText>
                        <MyText color={'#333'} fontSize={15}>{`${moment(item.started).format('A HH:mm')}至${moment(item.ended).format('A HH:mm')}`}</MyText>
                    </View>
                    <Line />
                </View>
                
                <View style={[activeStyles.listItem, activeStyles.item]}>
                    <MyText color={'#333'} fontSize={12}>{item.address}</MyText>
                </View>
                <View style={{ paddingLeft: 10, backgroundColor: '#fff' }}>
                    <Line type={'dashed'}/>
                </View>
                
                <View style={[activeStyles.listItem, activeStyles.item, commonStyles.flexRow]}>
                    <View style={[commonStyles.flex1, commonStyles.flexRow]}>
                        
                    </View>
                    <TouchableOpacity onPress={this.joinOrLeaveActive.bind(this, item)}>
                        <View style={[commonStyles.flexRow, groupStyles.joinBtn, item.isJoin ? groupStyles.isJoin : null]}>
                            <MyIcon name={!item.isJoin ? 'icon-jia1' : 'icon-gou'} color={item.isJoin ? '#999' : '#000'} size={15}/>
                            <MyText fontSize={15} style={{ marginLeft: 5 }} color={item.isJoin ? '#999' : '#000'}>{item.isJoin ? '已加入' : '加入'}</MyText>
                        </View>
                    </TouchableOpacity>
                </View>
            </TouchableOpacity>);
        };
        this.state = {
            activeList
        };
    }
    render() {
        return (<View style={[commonStyles.container, commonStyles.relative]}>
                <NavigationBar {...commonProps.navBar} leftButton={<NavBackButton />} title={{ title: '我的活动', tintColor: '#fff' }}/>
                <View style={commonStyles.flex1}>
                    <FlatList data={this.props.active.userJoinedActiveList} extraData={this.state} renderItem={this.renderItem} ItemSeparatorComponent={() => <Line height={10} color={'#f4f4f4'}/>} keyExtractor={(item) => item.id}/>
                </View>

            </View>);
    }
}
export default connect(({ auth, active }) => ({ auth, active }))(MyActivesPage);
